<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
      </el-breadcrumb>
       <br>
        <div class="bk">
          <el-input   placeholder="图片地址" v-model="imgurl"></el-input>
        <el-button class="ss el-icon-search" type="primary" @click="select">搜索</el-button>
        <el-button class="ss" type="info" @click="dialogTable = true">添加</el-button>
           <!-- 信息 -->
       
        <el-table :data="omoList" border style="width: 100%; margin-top: 10px;">
          <el-table-column prop="id" label="序号" > </el-table-column>
          <el-table-column  label="突破预览" >
            <template #default="scope">
                  <el-image
                  style="width: 100px; height: 100px"
                  :src="dz+scope.row.imgurl"
                  :fit="fit"
                  ></el-image>
                <!-- <img :src="scope.row.goodsSmallLogo"> -->
            </template>
          </el-table-column>
          <el-table-column prop="imgurl" label="图片路径">
          </el-table-column>
          <el-table-column prop="naviurl" label="导航路径" >
          </el-table-column>
           <el-table-column prop="createdAt" label="创建时间" >
          </el-table-column>
          <el-table-column label="状态" >   
            <template #default="scope">
          
                <el-switch
                  v-model="scope.row.chkStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
               
             
              </template>
          </el-table-column>
          <el-table-column label="操作">
                  <template #default="scope">
              <el-button type="danger" :icon="Delete" @click.prevent="deleteRow(scope.row.id)"></el-button>
         </template>
          </el-table-column>
        </el-table>
                <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5,10,15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
    </el-pagination>



      <el-dialog
        class="dia1"
           v-model="dialogTable"
            width="45%"
            :before-close="handleClose"
            >
           
            <div class="yh">
                  <label>图片路径:</label> 
              <div class="el-upload">
              <el-upload
                class="avatar-uploader"
                :headers="uploadHeaders"
                action="https://lqshuige.top:9000/upload/image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :data="{folder:'rootswiper',isResize:2}" 
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
              </el-upload>
              </div>
            </div> 
            <div class="yh">
              <label>导航路径:</label> 
              <el-input placeholder="导航路径" v-model="naviurl"></el-input>
             
            </div>
            <br>
            <span :v-slot="footer" class="dialog-footer">
              <el-button class="bj" type="primary" @click="add">添加</el-button>
              <el-button class="bj" type="warning" @click="dialogTable = false">取消</el-button>
            </span>
          </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import {
  Search,
  Edit,
  Check,
  Message,
  Star,
  Delete,ArrowDown,Plus, ZoomIn, Download
} from '@element-plus/icons-vue'

import { ref, reactive,computed,toRefs,onMounted} from "vue";
import { useRouter } from 'vue-router';
import httpRequest from '../service';
import { ElMessage,ElMessageBox } from 'element-plus';

// import { Plus } from '@element-plus/icons-vue'
import type {
  UploadFile,
  ElUploadProgressEvent,
  ElFile,
} from 'element-plus/es/components/upload/src/upload.type'

interface DataProps{
      imgurl:string,
      pageNo:number,
      pageSize:number,
      select:()=>void,
      omoList:[],
      add:()=>void,
       handleSizeChange:(val: number)=>void,
      handleCurrentChange:(val: number)=>void,
      count:number,
      dialogTable:boolean,
      deleteRow:(id:any)=>void,
      uploadHeaders:any,
      imageUrl:string,
      handleAvatarSuccess:(res: ElUploadProgressEvent, file: UploadFile) =>void,
      beforeAvatarUpload :(file: ElFile) =>void,
      imgurls:string,
      dz:string,
      naviurl:string

}
export default {
  name:'goods',
  setup(){
    const router = useRouter();
    const data:DataProps=reactive({
      imgurl:"",
      pageNo:1,
      pageSize:5,
      omoList:[],
       count:0,
       dialogTable:false,
       imageUrl:'',
       imgurls:'',
       naviurl:'',
       dz:'https://lqshuige.top:9000/images/upload/rootswiper/',
       uploadHeaders:{"Authorization":window.sessionStorage.getItem("token")},
       handleAvatarSuccess:(res: any, file: UploadFile)=>{
            data.imageUrl = URL.createObjectURL(file.raw)
            data.imgurls=res.data.path
            // data.imgurls="upload_b967f60e5107654c9d9d2d2016e2d6d5.jpg"
       },
        beforeAvatarUpload :(file: ElFile) =>{
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
              ElMessage.error('Avatar picture must be JPG format!')
            }
            if (!isLt2M) {
              ElMessage.error('Avatar picture size can not exceed 2MB!')
            }
            return isJPG && isLt2M
        },
         handleSizeChange:(val: number)=>{
          data.pageSize=val
          data.select()
      },
      handleCurrentChange:(val: number)=>{
            data.pageNo=val
             data.select()
      },
      //查询
      select:()=>{
  httpRequest
  .request({
    url: '/swiper/listswiper',
    method: 'post',
    data:{
      imgurl:data.imgurl,
      pageNo:data.pageNo,
      pageSize:data.pageSize
    },
    interceptors: {
      requestInterceptor: (config) => {
        console.log(config)
        return config
      }
    }
  })
  .then((res:any) => {
    data.count=res.data.count
    data.omoList=res.data.rows
    console.log(res);
    
  })
    },
    //添加
    add:()=>{
      // data.dialogTable=true
            httpRequest
    .request({
      url: '/swiper/addswiper',
      method: 'post',
      data:{
          imgurl:data.imgurls,
          naviurl:data.naviurl
      },
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      if(res.code===200){
          ElMessage({
      message: '添加成功',
      type: 'success',
        })
        data.dialogTable = false
      data.select()
      }else{
        ElMessage.error('添加失败')
      }
      console.log(res);
      
    })
    },
     //删除
     deleteRow:(id:any)=>{
        ElMessageBox.confirm(
    '确定需要删除吗？',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
            httpRequest
    .request({
      url: '/swiper/delswiper',
      method: 'post',
      data:{
      id
      },
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      if(res.code===200){
          ElMessage({
      message: '删除成功',
      type: 'success',
        })
      data.select()
      }else{
        ElMessage.error('删除失败')
      }
      console.log(res);
      
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
     }
    })
onMounted(()=> {
  data.select()
})
  const refData=toRefs(data)
  return{
    ...refData ,Delete,ArrowDown,Plus, ZoomIn, Download
  }

  }

}
</script>

<style lang="less" scoped>
.bk{
  border: 1px solid #cfd1d4;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
}

.el-button {
 
  width: 30px;
  height: 20px;
 padding:  0;
  font-size: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-input{
  width: 100px;
  float: left;
}
.ss{
  float: left;
  width: 60px;
  height:40px;
  margin-left:10px;
}
.dialog-footer{
  margin-top:-20px;
  float: left;
}
.yh{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top:15px;
  line-height:45px;
}
.yh .el-input{
    width:80%;
    height:25px;
    margin: 0px 0;
    
}
.dia1{
  height: 400px;
}
.bj{
  width: 50px;
  height:30px;
  margin-left: 200px;
  margin-top: 10px;
}
.foot2{
  float: right;
}
.op{
  margin-left:-210px;
  margin: auto 0;
}
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  // cursor: pointer;
  // position: relative;
  // overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>